import React from 'react'
/*
Promise
Promise.prototype.then
Promise.prototype.catch
Promise.prototype.finally

静态方法
Promise.resolve
Promise.reject
Promise.race
Promise.all

*/
export default class Psd extends React.Component{

    constructor(props){
        super(props)

        this.state = {
            isShow: true,
            date: new Date(),
            timeId: null
        }


    }

    componentDidMount(){
        this.state.timeId = setInterval(()=>{

            this.setState({
                date: new Date()
            })
        },1000 )
    }

    componentWillUnmount(){
        clearInterval(this.state.timeId)
    }


    handleSub(e){
        console.log(e)

        console.log("这是一个实践")

        this.setState(state => ({
            isShow: !state.isShow
        }))




    }


    render() {

        const numbers = [1, 33, 3, 4, 5];
        const listItems = numbers.map((numbers) =>
          <li key={numbers.toString()}>{numbers}</li>
        );

        class APromise{
          constructor(executor){
            // 初始化state为等待态
            this.state = 'pending';
            // 成功的值
            this.value = undefined;
            // 失败的原因
            this.reason = undefined;

            // 成功存放的数组
            this.onResolvedCallbacks = [];
            // 失败存放法数组
            this.onRejectedCallbacks = [];


            let resolve = value => {
              // state改变,resolve调用就会失败
              if (this.state === 'pending') {
                // resolve调用后，state转化为成功态
                this.state = 'fulfilled';
                // 储存成功的值
                this.value = value;

                // 一旦resolve执行，调用成功数组的函数
                this.onResolvedCallbacks.forEach(fn=>fn())
              }
            };
            let reject = reason => {
              // state改变,reject调用就会失败
              if (this.state === 'pending') {
                // reject调用后，state转化为失败态
                this.state = 'rejected';
                // 储存失败的原因
                this.reason = reason;

                // 一旦reject执行，调用失败数组的函数
                this.onRejectedCallbacks.forEach(fn=>fn());
              }
            };
            // 如果executor执行报错，直接执行reject
            try{
              executor(resolve, reject);
            } catch (err) {
              reject(err);
            }
          }

          then(onFulfilled,onRejected) {
              // 状态为fulfilled，执行onFulfilled，传入成功的值
              if (this.state === 'fulfilled') {
                onFulfilled(this.value);
              };
              // 状态为rejected，执行onRejected，传入失败的原因
              if (this.state === 'rejected') {
                onRejected(this.reason);
              };

              // 当状态state为pending时
              if (this.state === 'pending') {
                // onFulfilled传入到成功数组
                this.onResolvedCallbacks.push(()=>{
                  onFulfilled(this.value);
                })
                // onRejected传入到失败数组
                this.onRejectedCallbacks.push(()=>{
                  onRejected(this.reason);
                })
              }


            }

        }

        /*
            1、了解 Promise 吗？是一个js异步的解决方案（对比回调函数和事件），本质上来说 就是通过同步的方式去书写异步代码
            2、Promise 解决的痛点是什么？ 回调地狱问题
            3、Promise 解决的痛点还有其他方法可以解决吗？如果有，请列举。
            4、Promise 如何使用？
            5、Promise 常用的方法有哪些？它们的作用是什么？ Promise.resolve Promise.reject
            6、Promise 在事件循环中的执行过程是怎样的？
            7、Promise 的业界实现都有哪些？ q co bluebird
            8、能不能手写一个 Promise 的 polyfill。
        */
        return(
            <div>
                psd页面
                <h3 onClick={ this.handleSub.bind(this,111) } >  { this.state.isShow?'psd页面1':'psd页面2' }   </h3>
                <h3>
                    {
                        this.state.isShow ?
                        <div>232323</div>:<div>111111</div>
                    }
                    psd页面
                </h3>

                <div>{this.state.isShow &&

                    <div>操作符进行if渲染</div>
                }</div>
                <h3>psd页面</h3>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>


                <div>{listItems}</div>


                <div>
                    { numbers.map(

                        (item) => <div key={item.toString()}>{item}</div>

                    )

                    }

                </div>
            </div>
        )
    }
}
